<template>
  <div class="t-box">
    <div class="header">
      <van-search v-model="value" shape="round" background="rgb(4, 25, 181,0.6)" placeholder="请输入搜索关键词">
      </van-search>
      <router-link to="/login"><img class="img" src="" alt="" /></router-link>
    </div>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img src="../../public/images/lunbo1.webp" alt=""></van-swipe-item>
      <van-swipe-item><img src="../../public/images/lunbo2.webp" alt="" /></van-swipe-item>
      <va-swipe-item><img src="../../public/images/lunbo3.webp" alt=""></va-swipe-item>
      <van-swipe-item><img src="../../public/images/lunbo4.webp" alt="" /></van-swipe-item>
    </van-swipe>
    <div class="box">
      <router-link to="/home/order">
        <van-button type="primary">
          <van-icon name="add" class="icon" />
          <span class="span">预约挂号</span>
        </van-button>
      </router-link>
      <van-button type="primary">
        <van-icon name="question" />
        <span class="span">信息查询</span>
      </van-button>
    </div>
    <div class="btn-group">
      <van-space :size="20" wrap slign="center">
        <van-button type="primary" block>取消预约</van-button>
        <van-button type="primary" block>查看预约单</van-button>
        <van-button type="primary" block>查看挂号单</van-button>
        <van-button type="primary" block>挂号付费</van-button>
        <van-button type="primary" block>打印预约单</van-button>
        <van-button type="primary" block>打印挂号单</van-button>
      </van-space>
    </div>
    <div class="message">
      <van-icon name="fire-o" color="#ee0a24" />
      <span class="message-m">到医院就诊需持48小时核酸阴性证明!</span>
    </div>
    <div class="message">
      <van-icon name="fire-o" color="#ee0a24" />
      <span class="message-m">到医院就诊需持48小时核酸阴性证明!</span>
    </div>
    <div class="message">
      <van-icon name="fire-o" color="#ee0a24" />
      <span class="message-m">到医院就诊需持48小时核酸阴性证明!</span>
    </div>
    <div class="message">
      <van-icon name="fire-o" color="#ee0a24" />
      <span class="message-m">到医院就诊需持48小时核酸阴性证明!</span>
    </div>
    <div class="message">
      <van-icon name="fire-o" color="#ee0a24" />
      <span class="message-m">到医院就诊需持48小时核酸阴性证明!</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { Toast } from "vant";
const value = ref("");
const onSearch = (val) => Toast(val);
const onClickButton = () => Toast(value.value);
const images = [
  '../../public/images/lunbo1.webp',
  '../../public/images/lunbo2.webp',
  '../../public/images/lunbo3.webp',
  '../../public/images/lunbo4webp'
];

let banner_info = localStorage.getItem("bannerList");
banner_info = JSON.parse(banner_info);
const headerImg = () => {
  let info = sessionStorage.getItem('userInfo')
  if (info) {
    console.log(info);
    return JSON.stringify(info).headerimg
  }

  return '未登录'
}
</script>

<style scoped lang="scss">
.t-box {
  background: url("../../public/image/bg.jpg") repeat-y;
  background-size: cover;
  position: relative;

  .header {
    background: rgb(4, 25, 181, 0.6);

    .van-search {
      width: 341px;
    }

    .img {
      width: 40px;
      height: 40px;
      position: absolute;
      top: 7px;
      right: 2px;
      border-radius: 50%;
      font-size: 12px;
      border: 1px solid black;
      text-align: center;
      background: url(../../public/image/0DB97813F732C006D13A7EDBDE601189.png);
      background-size: cover;
    }
  }
}

.my-swipe {
  img {
    height: 200px;
    width: 100%;
  }
}

.box {
  display: flex;

  .van-button {
    width: 160px;
    height: 55px;
    background: rgb(4, 25, 181, 0.6);
    margin: 20px 20px;

    .van-button__content {
      .van-button__text {
        position: relative;

        .van-icon {
          font-size: 35px;
          position: absolute;
          top: 9px;
          left: 5px;

          .span {
            font-size: 25px;
            position: absolute;
            top: 11px;
            right: 5px;
          }
        }
      }
    }
  }
}

.btn-group {
  text-align: center;

  .van-space {
    justify-content: center;
    margin-left: 15px;

    .van-button {
      background: rgb(53, 177, 239, 0.6);
      color: rgb(250, 238, 238);
    }
  }
}

.message {
  width: 350px;
  margin-left: 13px;
  height: 40px;
  background: #ffffff;
  position: relative;
  border: 1px solid black;

  .van-icon {
    font-size: 26px;
    position: absolute;
    top: 5px;
    left: 10px;
  }

  .message-m {
    font-size: 14px;
    font-weight: 300;
    position: absolute;
    top: 13px;
    left: 50px;
  }
}
</style>
